<template>
  <div class="dm" :style="{height:pageHeight+'px'}">
    <div class="dm-left" :style="{width:leftWidth+'px'}" v-loading="dataTreeLoading" @click.stop="doDataTreeUnselect()">
      <div class="dm-left-data" :style="{height:pageHeight-2+'px'}">
        <Tree ref="tree" :data="dataTree" node-key="key" empty-text="暂无数据"
              highlight-current :expand-on-click-node="false"
              @node-click="doDataTreeSelect">
            <span class="coc-tree-node" slot-scope="{ node, data }">
              <span>
                <a-icon v-if="data.type=='corp'" slot="corpIcon" type="home" />
                <a-icon v-if="data.type=='dept'" slot="deptIcon" type="apartment" />
                <a-icon v-if="data.type=='group'" slot="groupIcon" type="team" />
                <a-icon v-if="data.type=='gov'" slot="groupIcon" type="bank" />
                {{ node.label }}
              </span>
            </span>
        </Tree>
      </div>
    </div>
    <div class="dm-right" :style="{width:rightWidth+'px'}">
      <div class="dm-query">
        <QueryBar @onChange="doQueryChange" />
      </div>
      <div class="dm-data" :style="{height:pageHeight-55+'px'}">
          <div class="dm-data-top">
            <a-pagination v-model="pagination.current"
                          class="dm-data-page"
                          :total="pagination.total"
                          :default-page-size="pagination.defaultPageSize"
                          :show-total="pagination.showTotal"
                          size="small"
                          @change="doPageChange" />
            <div class="dm-data-actions">
              <a-button-group>
                <a-button @click="doEditRoles2">授权</a-button>
                <a-button @click="doEditPosts2">调岗</a-button>
                <a-popconfirm :disabled="dataRowsSelected.length==0" title="您确定要删除选中的人员吗？" placement="left" @confirm="doDelete()">
                  <a-button :disabled="dataRowsSelected.length==0">删除</a-button>
                </a-popconfirm>
              </a-button-group>
              <a-button @click="doAdd">新增</a-button>
            </div>
          </div>
          <Table :data="dataRows" size="small" stripe highlight-current-row v-loading="dataRowsLoading"
                 :height="pageHeight-107"
                 @select="doTableSelect"
                 @select-all="doTableSelect"
                 @row-click="doTableRowClick"
                 @row-dblclick="doTableRowDblclick"
                 @sort-change="doTableSortChange"
          >
            <TableColumn type="selection" width="35" />
            <TableColumn prop="name" label="姓名" width="100" sortable="custom" fixed />
            <TableColumn prop="sexName" label="性别" width="75" sortable="custom" column-key="sex" />
            <TableColumn prop="tel" label="手机号码" width="120" sortable="custom" />
            <TableColumn prop="orgFullName" label="主工作单位" min-width="200" />
            <TableColumn prop="postName" label="主要职位" min-width="150" />
            <TableColumn label="一人多岗" width="100">
              <span slot-scope="{row}">
                <TreeCascaderDialog multiple tree-result
                                    :panel1="postCascaderPanel1()"
                                    :panel2="postCascaderPanel2()"
                                    :results="postCascaderResults(row)"
                                    @onConfirm="refreshDataRows">
                  <a-button v-if="row.userPostList && row.userPostList.length" type="link" size="small">{{row.userPostList.length}}个</a-button>
                  <a-button v-else type="link" size="small">调岗</a-button>
                </TreeCascaderDialog>
              </span>
            </TableColumn>
            <TableColumn label="功能权限" width="100">
              <span slot-scope="{row}">
                <TreeTransferDialog :value="row.roleList"
                                    :leftOptions="roleTransferLeftOptions(row)"
                                    :rightOptions="roleTransferRightOptions()"
                                    @onClose="refreshDataRows">
                  <a-button v-if="row.roleList && row.roleList.length" type="link" size="small">{{row.roleList.length}}个</a-button>
                  <a-button v-else type="link" size="small">授权</a-button>
                </TreeTransferDialog>
              </span>
            </TableColumn>
            <TableColumn prop="createTime" label="创建时间" width="160" sortable="custom" />
            <TableColumn prop="updateTime" label="修改时间" width="160" sortable="custom" />
            <TableColumn prop="statusText" label="状态" width="120" sortable="custom" column-key="statusCode" />
            <TableColumn label="操作" width="120" fixed="right">
              <a-button-group slot-scope="{row}">
                <a-button size="small" @click="doEdit(row)">修改</a-button>
                <a-popconfirm title="您确定要删除该用户吗？" placement="topLeft" @confirm="doDelete(row)">
                  <a-button size="small">删除</a-button>
                </a-popconfirm>
              </a-button-group>
            </TableColumn>
          </Table>
      </div>
    </div>
  </div>
</template>
<script>
import DataTreeTableUtils from '@/utils/DataTreeTableUtils'

import QueryBar from './QueryBar.vue'

const EditForm = '/sys/user/edit.vue'
const EditRolesForm = '/sys/user/editRoles.vue'
const EditPostsForm = '/sys/user/editPosts.vue'

export default {
  mixins: [DataTreeTableUtils],
  components: {QueryBar},
  data() {
    return {
      queryParams: {
        pageSize: 20,
        pageIndex: 1,
        sortField: '',
        sortOrder: '',
      },
      queryConditions: {
        orgId: '',
        sex: '',
        keywords: '',
        postIdList: []
      },
      dataTreeQueryUrl: '/jsofted/org/tree',
      dataRowsQueryUrl: '/jsofted/user/query',
      dataRowsDeleteUrl: '/jsofted/user/delete/',
    }
  },
  watch: {
    dataTreeSelected(node) {
      this.queryConditions.orgId = node ? node.id : ''
    },
  },
  methods: {
    doAdd() {
      if (this.dataTreeSelected) {
        this.$store.dispatch('ctx/openPage', {
          path: EditForm,
          title: '新增人员信息',
          params: {
            orgId: this.dataTreeSelected.id,
            orgName: this.dataTreeSelected.name,
            orgFullName: this.dataTreeSelected.fullName
          }
        })
      } else {
        this.$message.error('请先选择单位！')
      }
    },
    doEdit(record) {
      this.$store.dispatch('ctx/openPage', {
        path: EditForm,
        title: '【' + record.name + '】人员信息',
        params: {
          id: record.id
        }
      })
    },
    doEditRoles2(record) {
      const idList = this._getIdList(record)
      this.$store.dispatch('ctx/openPage', {
        path: EditRolesForm,
        title: '批量授权',
        params: {
          idList: idList
        },
      })
    },
    doEditPosts2(record) {
      const idList = this._getIdList(record)
      this.$store.dispatch('ctx/openPage', {
        path: EditPostsForm,
        title: '批量调岗',
        params: {
          idList: idList
        },
      })
    },
    _getIdList(record) {
      let idList = []
      if (record && record.id) {
        idList.push(record.id)
      } else {
        idList = this.dataRowsSelectedKeys
      }
      return idList
    },
    roleTransferRightOptions() {
      return {
        addUrl: '/jsofted/userRole/add',
        deleteUrl: '/jsofted/userRole/deleteBy',
        field: 'roleId',
        title: '已选角色'
      }
    },
    roleTransferLeftOptions(row) {
      return {
        dataUrl: '/jsofted/role/tree',
        field: 'userId',
        title: '可选角色',
        value: row.id,
        queryParams: {
          tenantId: this.$loginInfo.tenantId
        },
      }
    },
    postCascaderPanel1() {
      return {
        dataUrl: '/jsofted/org/tree',
        title: '第1步：选择单位',
        emptyText: '暂无单位选项'
      }
    },
    postCascaderPanel2() {
      return {
        dataUrl: '/jsofted/post/tree',
        casField: 'orgId',
        title: '第2步：选择职位',
        emptyText: '暂无职位选项'
      }
    },
    /**
     * 人员职位中间表编辑器参数——中间表参数
     */
    postCascaderResults(row) {
      return {
        dataUrl: '/jsofted/userPost/list',
        leftField: 'userId',
        leftValue: row.id,
        rightField1: 'orgId',
        rightNameField1: 'orgFullName',
        rightField2: 'postId',
        rightNameField2: 'postName',
        saveUrl: '/jsofted/userPost/deleteThenAdd',
        emptyText: '暂无选中的职位'
      }
    },
  }
}
</script>
